import "./CardIndex.css";
import Unknown from './unknown.svg';
import React, { Component } from 'react';

export default
class CardIndex extends Component {

  constructor(props) {
    super(props);

    this.showBrief = this.showBrief.bind(this);
  }

  renderIndexes( indexes ) {
    indexes = indexes || this.props.Indexes;

    return indexes.map(( value, index ) => 
      <div key={index} id={index} className="panel-card" >
        <img alt={value.img} src={value.img?value.img:Unknown}></img>{value.img}
        <div className="header" id={index} onClick={this.props.onIndexChanged}>{value.name}</div>
        <div className="author" id={index} onClick={this.props.onAuthorClicked}>{value.author}</div>
        <button id={index} onClick={this.showBrief}>{">>"}</button>
        <div className="brief hidden" id={`brief-${index}`}>{value.brief}</div>
      </div>
    );
  }

  showBrief(event) {
    
    const index = event.target.id;
    const elBrief = document.getElementById(`brief-${index}`);
    
    if(elBrief) {
      if( elBrief.classList.contains('hidden') ) {
        elBrief.style.left = `${event.pageX}px`;
        elBrief.style.top = `${event.pageY}px`;
        elBrief.classList.remove('hidden');

        if( this.displayedBrief ) {
          this.displayedBrief.classList.add('hidden');
        }
        this.displayedBrief = elBrief;
      }
      else {
        elBrief.classList.add('hidden');
        this.displayedBrief = null;
      }
    }

  }


  render() {
    return (
      <div className="panel-root">
        {this.renderIndexes()}
      </div>
    )
  }
}